<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb>
      <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="user-container">
      <!-- 按钮组 -->
      <el-row>
        <el-col :span="8">
          <!-- 按钮 -->
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="handleDelSelected"
          >
            删除选中
          </el-button>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-circle-plus-outline"
            @click="handleAdd"
          >
            添加
          </el-button>
        </el-col>
        <el-col :span="8" :offset="8">
          <el-input
            v-model="keywords"
            size="small"
            placeholder="需要查找的用户名"
            @keyup.enter.native="handleSearch"
          >
          </el-input>
          <el-button type="primary" size="mini" @click="handleSearch">
            搜索
          </el-button>
        </el-col>
      </el-row>
      <!-- 数据表格 -->
      <el-table :data="users" stripe border>
        <el-table-column label="选择" width="50px" prop="selected">
          <template v-slot="check">
            <!-- <el-checkbox
              @change="handleSelect(check.row)"
              :checked="Boolean(check.row.selected)"

            ></el-checkbox> -->
            <input
              type="checkbox"
              @change="handleSelect(check.row)"
              :checked="Boolean(check.row.selected)"
            />
          </template>
        </el-table-column>
        <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="个人签名" prop="personNote"></el-table-column>
        <el-table-column label="操作" min-width="150px">
          <template v-slot="scoped">
            <el-button size="mini" @click="handleEdit(scoped.row)">
              编辑
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDel(scoped.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 对话框 -->
    <el-dialog
      :title="isEdit ? '修改用户' : '添加用户'"
      :visible.sync="dialogVisible"
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="用户名" label-width="150px" prop="username">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密 码" label-width="150px" prop="password">
          <el-input v-model="form.password" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit"> 提交 </el-button>
      </div>
    </el-dialog>

    <!-- 编辑用户 -->
  </div>
</template>

<script>
export default {
  name: 'User',
  data() {
    return {
      keywords: '',
      users: [
        // { id: 1, username: '小明', password: '123' },
        // { id: 2, username: '小美', password: '456' },
        // { id: 3, username: '小胖', password: '789' },
      ],
      page: 1, // 当前的页码数目
      size: 5, // 每页显示数
      total: 0,
      dialogVisible: false,
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
        ],
      },
      isEdit: false,
      isSearch: false,
    }
  },
  created() {
    this.getUsers()
  },
  methods: {
    handleSelect(row) {
      if (row.selected == 0) {
        row.selected = 1
      } else {
        row.selected = 0
      }
      this.$api.putUserSelect(row)
    },
    getUsers() {
      this.$api.getUsers(this.page, this.size).then((res) => {
        const { code, message, result } = res.data
        if (code == 0) {
          // console.log('我访问了数据')
          this.users = result.data
          this.total = result.total
        } else {
          this.$message.error(message)
        }
      })
    },
    getSearch() {
      this.$api
        .getUsersSearch(this.page, this.size, this.keywords)
        .then((res) => {
          const { code, message, result } = res.data
          if (code == 0) {
            this.users = result.data
            this.total = result.total
          } else {
            this.$message.error(message)
          }
        })
    },
    handleDelSelected() {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.deleteSelectUsers().then((res) => {
            const { code, message, result } = res.data
            if (code == 0) {
              // this.$message.success(message)
              // console.log(this.isSearch)
              if (this.isSearch == true) {
                this.getSearch()
              } else {
                this.getUsers()
              }
            } else {
              this.$message.error(message)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
      // console.log('我删除了选中')
    },
    handleAdd() {
      this.form = {}
      this.dialogVisible = true
      this.isEdit = false
    },
    handleSearch() {
      if (this.keywords == '') {
        this.getUsers()
      } else {
        this.isSearch = true
        this.getSearch()
      }
    },
    handleEdit(row) {
      // console.log(row)
      // console.log(this.form)
      // 显示对话框
      this.dialogVisible = true
      this.isEdit = true
      // console.log(row.id)
      // 回显数据
      this.$api.getOneUser(row.id).then((res) => {
        const { code, message, result } = res.data
        if (code == 0) {
          this.form = result
        } else {
          this.$message.error(message)
        }
      })
    },
    handleDel(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.delOneUser(row.id).then((res) => {
            const { code, message, result } = res.data
            if (code == 0) {
              this.$message.success(message)
              this.getUsers()
              if (this.isSearch == true) {
                this.getSearch()
              } else {
                this.getUsers()
              }
            } else {
              this.$message.error(message)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    handleSizeChange(p) {
      this.size = p
      if (this.isSearch == false) {
        this.getUsers()
      } else {
        this.getSearch()
      }
    },
    handleCurrentChange(s) {
      this.page = s
      if (this.isSearch == false) {
        this.getUsers()
      } else {
        this.getSearch()
      }
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.isEdit == false) {
            this.$api.postAddUser(this.form).then((res) => {
              const { code, message, result } = res.data
              if (code == 0) {
                // 提示新增成功
                this.$message.success(message)
                // 重新获取数据
                this.getUsers()
                // 关闭对话框
                this.dialogVisible = false

                // 清空表单的数据
                this.$refs['form'].resetFields()
              } else {
                this.$message.error(message)
              }
            })
          } else {
            // console.log(this.form)
            // 修改
            this.$api.putModifyUser(this.form.id, this.form).then((res) => {
              const { code, message, result } = res.data
              if (code == 0) {
                // 提示新增成功
                this.$message.success(message)
                // 重新获取数据
                this.getUsers()
                // 关闭对话框
                this.dialogVisible = false

                // 清空表单的数据
                this.$refs['form'].resetFields()
              } else {
                this.$message.error(message)
              }
            })
          }
        }
      })
    },
  },
}
</script>

<style scoped>
/* scoped:(作用域), 在这里写的样式仅仅会影响当前组件 */
.user-container {
  margin-top: 20px;
  min-width: 700px;
}
.el-input {
  width: 70%;
  margin-right: 10px;
}
.el-table {
  margin-top: 20px;
}
</style>
